{% extends "base.html" %}
{% block title %} 注册 {% endblock %}
{% block head %}
    <style>
        .login_register_box {
            width: 400px;
            border: 1px solid #dddddd;
            border-radius: 5px;
            box-shadow: 5px 5px 10px #eeeeee;
            padding: 20px 40px;
            margin-top: 35px;
        }
    </style>
{% endblock %}
{% block body %}
    <div style="display: flex;justify-content: center;align-items: center;">
        {# 注册form表单 #}
        <section class="login_register_box">
            <div style="text-align: center"><h2 style="font-weight: bold">注册</h2></div>
            <form action="{{ url_for("business.register") }}" method="post">
                <div class="form-group">
                    <label for="Account">{{ form.account.label }}</label>
                    {% if form.account.data == none %}
                        <input class="form-control" id="Account" name="{{ form.account.name }}" placeholder="account">
                    {% else %}
                        <input class="form-control" id="Account" name="{{ form.account.name }}"
                               value="{{ form.account.data }}">
                    {% endif %}
                </div>
                <div class="form-group">
                    <label for="Password">{{ form.password.label }}</label>
                    {% if form.password.data == none %}
                        <input class="form-control" id="Password" name="{{ form.password.name }}"
                               placeholder="password">
                    {% else %}
                        <input class="form-control" id="Password" name="{{ form.password.name }}"
                               value="{{ form.password.data }}">
                    {% endif %}
                </div>
                <div class="form-group">
                    <label for="Email">{{ form.email.label }}</label>
                    <span style="color:red;font-weight: bold;font-size: 14px">
                        请谨慎</span>，这将用于您日后找回密码的凭证

                    {% if form.password.data == none %}
                        <input class="form-control" id="Email" name="{{ form.email.name }}"
                               placeholder="email">
                    {% else %}
                        <input class="form-control" id="Email" name="{{ form.email.name }}"
                               value="{{ form.email.data }}">
                    {% endif %}
                </div>
                <div class="form-group">
                    <label for="ImageCode">{{ form.imageCode.label }}</label>
                    <div class="row">
                        <div class="col-xs-7">
                            {% if form.imageCode.data == none %}
                                <input class="form-control" id="ImageCode" name="{{ form.imageCode.name }}"
                                       placeholder="verification code">
                            {% else %}
                                <input class="form-control" id="ImageCode" name="{{ form.imageCode.name }}"
                                       value="{{ form.imageCode.data }}">
                            {% endif %}
                        </div>
                        <div class="col-xs-5">
                            <img id="imageCode_img" src="{{ url_for("business.imageCode") }}"
                                 style="width: 100px;height: 34px" alt="验证码"/>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="btn btn-primary form-control">注册</button>
            </form>
            <ul style="padding-left: 0">
                {% for message in get_flashed_messages() %}
                    <li style="color: red">{{ message }}</li>
                {% endfor %}
            </ul>
            <div style="margin-top: 15px">
                <div style="float: right">
                    <a href="{{ url_for("business.login") }}">
                        <i data-text="fa-mail-reply" class=" fa fa-mail-reply js-copy"></i>
                        返回登录
                    </a>
                </div>
                <div style="clear: both"></div>
            </div>
        </section>
    </div>

{% endblock %}
{% block js %}
    <script>
        $(function () {
            //监听图片验证码点击事件
            listeningImageCode();
        })

        function listeningImageCode() {
            $("#imageCode_img").on("click", function () {
                $("#imageCode_img").attr('src', '{{ url_for("business.imageCode") }}?' + Math.random());
            })
        }
    </script>
{% endblock %}
